<template>
    <div id="app" style="background-color: #edf1f7 !important;">
        <header-view></header-view>
        <div class="cart-table-container">
            <!-- 动态显示课程数量 -->
            <h3 class="cart-title">我的购物车 共 {{ getCourseCount() }} 门课程</h3>
            <!-- 表格主体 -->
            <table class="cart-table">
                <thead>
                    <tr>
                        <th width="60">
                            <input type="checkbox" class="check-all"  v-model="isAllChecked" @change="toggleAll"/> 全选
                        </th>
                        <th>课程名称</th>
                        <th>原价</th>
                        <th>优惠</th>
                        <th width="80">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 手动编写课程 1 -->
                    <tr>
                        <td>
                            <input type="checkbox" v-model="checkedItems[0]" @change="updateCheckStatus" />
                        </td>
                        <td class="course-info">
                            <img src="../image/lQLPJw-5RYZcElTMyM0BSrAeZ3aicl1m4AOnon0oQP8A_330_200-1608044920902254592.png" alt="Python实现接口自动化测试" class="course-cover" />
                            <span class="course-name">Python实现接口自动化测试</span>
                        </td>
                        <td>
                            <del>¥9999</del>
                            <!-- 标记课程价格 -->
                            <span class="discount-price" data-price="99.9">¥99.9</span>
                        </td>
                        <td>
                            <span class="discount-tag">限时钜惠</span>
                        </td>
                        <td>
                            <i class="delete-icon" @click="deleteCourse(0)">×</i>
                        </td>
                    </tr>
                    <!-- 手动编写课程 2 -->
                    <tr>
                        <td>
                            <input type="checkbox" v-model="checkedItems[1]" @change="updateCheckStatus" />
                        </td>
                        <td class="course-info">
                            <img src="../image/web前端干混砂浆-1700034534491291648.jpg" alt="前端项目-干混砂浆（Vue2+高德地图API）" class="course-cover" />
                            <span class="course-name">前端项目-干混砂浆（Vue2+高德地图API）</span>
                        </td>
                        <td>
                            <del>¥1000</del>
                            <!-- 标记课程价格 -->
                            <span class="discount-price" data-price="9.9">¥9.9</span>
                        </td>
                        <td>
                            <span class="discount-tag">限时钜惠</span>
                        </td>
                        <td>
                            <i class="delete-icon" @click="deleteCourse(1)">×</i>
                        </td>
                    </tr>
                    <!-- 手动编写课程 3 -->
                    <tr>
                        <td>
                            <input type="checkbox" v-model="checkedItems[2]" @change="updateCheckStatus" />
                        </td>
                        <td class="course-info">
                            <img src="../image/软件性能测试-课程封面2-1613013295319482368.png" alt="软件性能测试" class="course-cover" />
                            <span class="course-name">软件性能测试</span>
                        </td>
                        <td>
                            <del>¥900</del>
                            <!-- 标记课程价格 -->
                            <span class="discount-price" data-price="98.8">¥98.8</span>
                        </td>
                        <td>
                            <span class="discount-tag">限时钜惠</span>
                        </td>
                        <td>
                            <i class="delete-icon" @click="deleteCourse(2)">×</i>
                        </td>
                    </tr>
                    <!-- 手动编写课程 4 -->
                    <tr>
                        <td>
                            <input type="checkbox" v-model="checkedItems[3]" @change="updateCheckStatus" />
                        </td>
                        <td class="course-info">
                            <img src="../image/MQ消息队列-1699063416561336320.jpg" alt="宇哥带你学Java之消息队列MQ" class="course-cover" />
                            <span class="course-name">宇哥带你学Java之消息队列MQ</span>
                        </td>
                        <td>
                            <!-- 标记课程价格 -->
                            <span class="original-price" data-price="2999">¥2999</span>
                        </td>
                        <td>
                            <span class="original-tag">原价</span>
                        </td>
                        <td>
                            <i class="delete-icon" @click="deleteCourse(3)">×</i>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 底部操作栏 -->
            <div class="footer-bar">
                <div class="footer-left">
                    <input type="checkbox" class="check-all" v-model="isAllChecked" @change="toggleAll" /> 全选
                </div>
                <div class="footer-right">
                    <!-- 动态显示总价 -->
                    <span class="total-price">合计：¥{{ totalPrice.toFixed(2) }}</span>
                    <!-- 动态绑定按钮样式 -->
                    <button class="submit-btn" :class="{ 'active': totalPrice > 0 }">提交</button>
                </div>
            </div>
        </div>
        <footerView></footerView>
    </div>
</template>
<script>
import headerView from '../detail/component/headerView.vue'
import footerView from '../components/footerView.vue'

export default {
    name: 'carView',
    components: {
        headerView,
        footerView,
    },
    data() {
        return {
            isAllChecked: false,
            checkedItems: [false, false, false, false],
            totalPrice: 0
        }
    },
    methods: {
        toggleAll() {
            this.checkedItems = this.checkedItems.map(() => this.isAllChecked)
            this.calculateTotalPrice()
        },
        updateCheckStatus() {
            this.isAllChecked = this.checkedItems.every(item => item)
            this.calculateTotalPrice()
        },
        deleteCourse(index) {
            this.checkedItems.splice(index, 1)
            const rows = document.querySelectorAll('.cart-table tbody tr')
            if (rows[index]) {
                rows[index].remove()
            }
            this.calculateTotalPrice()
            const title = document.querySelector('.cart-title')
            if (title) {
                const count = document.querySelectorAll('.cart-table tbody tr').length
                title.textContent = `我的购物车 共 ${count} 门课程`
            }
        },
        getCourseCount() {
            return document.querySelectorAll('.cart-table tbody tr').length
        },
        calculateTotalPrice() {
            let total = 0
            const priceElements = document.querySelectorAll('.cart-table tbody tr .discount-price, .cart-table tbody tr .original-price')
            priceElements.forEach((element, index) => {
                if (this.checkedItems[index]) {
                    total += parseFloat(element.getAttribute('data-price'))
                }
            })
            this.totalPrice = total
        }
    },
    created() {
        this.calculateTotalPrice()
    }
}
</script>
<style lang="scss" scoped>
.cart-table-container {
  width: 80%;
  margin: 40px auto;
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
}
/* 标题样式 */
.cart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
/* 表格基础样式 */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}
.cart-table th,
.cart-table td {
  border: 1px solid #ddd;
  padding: 12px 8px;
  text-align: left;
}
.cart-table thead {
  background-color: #f8f9fa;
}
/* 课程信息单元格样式 */
.course-info {
  display: flex;
  align-items: center;
}
.course-cover {
  width: 220px;
  height: 125px;
  margin-right: 10px;
  object-fit: cover;
}
.course-name {
  font-size: 14px;
}
/* 价格样式 */
del {
  color: #999;
  text-decoration: line-through;
  margin-right: 6px;
}
.discount-price {
  color: #ff5722;
  font-weight: bold;
}
.original-price {
  color: #333;
}
/* 标签样式 */
.discount-tag {
  background-color: #ff5722;
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
}
.original-tag {
  background-color: #6c757d;
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
}
/* 操作列样式 */
.delete-icon {
  cursor: pointer;
  color: #dc3545;
  font-size: 16px;
  font-style: normal;
}
.delete-icon:hover {
  color: #c82333;
}
/* 底部栏样式 */
.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
}
.footer-left {
  display: flex;
  align-items: center;
}
.footer-right {
  display: flex;
  align-items: center;
}
.total-price {
  margin-right: 20px;
  font-weight: bold;
}
/* 修改提交按钮样式 */
.submit-btn {
  background-color: #6c757d;
  color: #fff;
  border: none;
  padding: 6px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #5a6268;
}

/* 选中课程时提交按钮变为橙色 */
.submit-btn.active {
  background-color: #ff5722;
}

.submit-btn.active:hover {
  background-color: #e64a19;
}
</style>